import { useState, useReducer } from "react";

function AppState() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>count: {count}</p>
            <button
                onClick={() => {
                    setCount(count + 1); // 改成字符串，改成对象。操作不好受限制，不好受控制
                }}>
                count + 1
            </button>
            <button
                onClick={() => {
                    setCount(count - 1);
                }}>
                count - 1
            </button>
        </div>
    );
}

function AppReducer() {
    // useReducer 第一个参数是一个reducer函数，第二个参数是初始state的值
    // reducer函数 第一个参数是上一次的state，第二个参数是一个动作，代表要做什么事情，第二个参数必须是对象。返回值是改变后的新对象
    const initState = { count: 0 };
    // reducer 里面是纯函数不要其他副作用代码(异步操作) 类似vuex mutation
    const reducer = (state, action) => {
        // state本身是只读的
        // 可以用switch case也可以用if else
        switch (action.type) {
            case "add":
                state.count = state.count + (action.payload || 1);
                break;
            case "cut":
                state.count = state.count - 1;
                break;

            default:
                console.log("action 动作不对");
        }
        return { ...state }; // 必须要返回新的值
    };
    // 第一个返回的状态
    // 第二个返回的是修改状态的函数 -> 不是直接修改状态 -> 告诉状态机要修改状态的动作
    const [state, dispatch] = useReducer(reducer, initState);

    return (
        <div>
            <p>count: {state.count}</p>
            <button
                onClick={() => {
                    dispatch({ type: "add", payload: 10 }); // { type: "add" } 是 action动作

                    // fetch().then(()=>{
                    //      dispatch({ type: "add" });
                    // })
                }}>
                count + 10
            </button>
            <button
                onClick={() => {
                    dispatch({ type: "add" }); // { type: "add" } 是 action动作
                }}>
                count + 1
            </button>
            <button
                onClick={() => {
                    dispatch({ type: "cut" });
                }}>
                count -1
            </button>
        </div>
    );
}

export default AppReducer;
